<template>
  <div class="classroom-recommend">
    <eltable
      :table-label="tableLabel"
      :table-data="listFilter.slice((currentpage-1)*pagesize,currentpage*pagesize)"
    >
      <el-table-column slot="button" label="操作" prop="manage" align="center" min-width="30">
        <template slot-scope="scope">
          <el-button type="primary" @click="setRecommend(scope)">设置序号</el-button>
          <el-button type="primary" @click="cancelRecommend(scope)">取消推荐</el-button>
        </template>
      </el-table-column>
    </eltable>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />

    <!-- 推荐序号设置 -->
    <el-dialog :visible.sync="dialogVisible" title="设置推荐注册会计师（班级名称）" width="980px">
      <el-form ref="sequence" :model="sequence" :rules="rules">
        <el-form-item label="序号" prop="num">
          <el-input v-model="sequence.num" style="width: 280px"/>
          请输入长度不能超过8位的整数
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateClassroom">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Eltable from '@/components/Eltable'
  import Pagination from '@/components/Pagination'
  import {getRecommendClassroomList, updateClassroom} from '@/api/subject/classroom' // 接口
  import {getTenantId} from '@/utils/auth'

  export default {
    components: {
      Eltable,
      Pagination
    },
    data() {
      return {
        total: 0,
        currentpage: 1,
        pagesize: 10,
        dialogVisible: false,
        sequence: {
          entity: '',
          num: ''
        },
        tableLabel: [
          {
            label: '顺序号', width: '10', prop: 'recommendedSeq'
          },
          {
            label: '班级名称', width: '30', prop: 'title', isOpera: true
          },
          {
            label: '创建时间', width: '15', prop: 'createTime'
          },
          {
            label: '推荐时间', width: '15', prop: 'recommendedTime'
          }
        ],
        tableData: [],
        listFilter: [],
        rules: {
          num: [
            {required: true, message: '必填信息', trigger: 'blur'},
            {min: 1, max: 8, message: '长度不能超过8位', trigger: 'blur'},
            {pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入长度不能超过8位的整数'}
          ]
        }
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      handleSizeChange(val) {
        console.log(val)
        this.currentpage = 1
        this.pagesize = val.value
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleCurrentChange(val) {
        console.log(val)
        this.currentpage = val.value
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      getData() {
        getRecommendClassroomList(getTenantId()).then(response => {
          response.data.items.map(item => {
            if (item.createTime) item.createTime = new Date((item.createTime)).toLocaleString().substring(0, 10).replace(/[\u4e00-\u9fa5]/g, '')
            if (item.recommendedTime) item.recommendedTime = new Date((item.recommendedTime)).toLocaleString().substring(0, 10).replace(/[\u4e00-\u9fa5]/g, '')
          })
          this.tableData = response.data.items
          this.listFilter = response.data.items
          this.total = response.data.items.length
        })
      },
      setRecommend(scope) {
        this.dialogVisible = true
        this.sequence.entity = scope.row
      },
      updateClassroom() {
        this.$refs.sequence.validate((valid) => {
          if (valid) {
            this.dialogVisible = false
            this.sequence.entity.recommended = 1
            if (!this.sequence.num) this.sequence.num = 100
            this.sequence.entity.recommendedSeq = this.sequence.num
            this.sequence.entity.recommendedTime = new Date()
            this.sequence.entity.createTime = new Date(this.sequence.entity.createTime)
            updateClassroom(this.sequence.entity).then(response => {
              this.$notify({
                title: '成功',
                message: '推荐序号修改完成！',
                type: 'success',
                duration: 2000
              })
              this.getData()
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      cancelRecommend(scope) {
        this.$confirm(`确定取消推荐吗`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          scope.row.recommended = 0
          scope.row.recommendedSeq = 100
          scope.row.recommendedTime = ''
          scope.row.createTime = new Date(scope.row.createTime)
          updateClassroom(scope.row).then(res => {
            this.$notify({
              title: '成功',
              message: '推荐已取消！',
              type: 'success',
              duration: 2000
            })
            this.getData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '放弃取消'
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .classroom-recommend {
    padding: 14px 20px;
  }
</style>
